<template>
    <div class="receiving-scan">
        <b-big-card title="收件扫描" class="scan-form">
            <template #content>
                <b-form :fields="formFields" :buttons="formButtons"></b-form>
            </template>
        </b-big-card>
        <b-big-card title="列表" class="scan-list">
            <template #operate>
                <b-button type="primary">批量打印</b-button>
                <b-button type="danger">删除</b-button>
            </template>
            <template #content>
                <b-table :columns="columns" :tableData="tableData"></b-table>
            </template>
        </b-big-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BBigCard from '@/components/BBigCard.vue';
import BTable from '@/components/BTable.vue';
import BForm from '@/components/BForm.vue';
import BButton from '@/components/BButton.vue';

// 表单字段
let formFields = ref([
    {
        prop: 'kjlx',
        label: '快件类型',
        type: 'select',
        placeholder: '请选择',
        options: [
            { label: '快件类型1', value: '1' },
            { label: '快件类型2', value: '2' },
            { label: '快件类型3', value: '3' },
            { label: '快件类型4', value: '4' },
            { label: '快件类型5', value: '5' },
            { label: '快件类型6', value: '6' },
        ]
    },
    {
        prop: 'wplx',
        label: '物品类型',
        type: 'select',
        placeholder: '请选择',
        options: [
            { label: '物品类型1', value: '1' },
            { label: '物品类型2', value: '2' },
            { label: '物品类型3', value: '3' },
            { label: '物品类型4', value: '4' },
            { label: '物品类型5', value: '5' },
            { label: '物品类型6', value: '6' },
        ]
    },
    {
        prop: 'fkfs',
        label: '付款方式',
        type: 'select',
        placeholder: '请选择',
        options: [
            { label: '付款方式1', value: '1' },
            { label: '付款方式2', value: '2' },
            { label: '付款方式3', value: '3' },
            { label: '付款方式4', value: '4' },
            { label: '付款方式5', value: '5' },
            { label: '付款方式6', value: '6' },
        ]
    },
    {
        prop: 'sjy',
        label: '收件员',
        type: 'select',
        placeholder: '请选择',
        options: [
            { label: '收件员1', value: '1' },
            { label: '收件员2', value: '2' },
            { label: '收件员3', value: '3' },
            { label: '收件员4', value: '4' },
            { label: '收件员5', value: '5' },
            { label: '收件员6', value: '6' },
        ]
    },
    {
        prop: 'mdd',
        label: '目的地',
        type: 'select',
        placeholder: '请选择',
        options: [
            { label: '目的地1', value: '1' },
            { label: '目的地2', value: '2' },
            { label: '目的地3', value: '3' },
            { label: '目的地4', value: '4' },
            { label: '目的地5', value: '5' },
            { label: '目的地6', value: '6' },
        ]
    },
    {
        prop: 'zl',
        label: '重量',
        type: 'number',
        placeholder: '请输入重量',
    },
    {
        prop: 'ydbh',
        label: '运单编号',
        type: 'text',
        placeholder: '运单编号',
    },
    {
        prop: 'qt',
        label: '其他',
        type: 'text',
        placeholder: '其他',
    }
])


// 表单按钮
let formButtons = [
    {
        label: '清空',
        type: 'clearFormData',
        btnType: 'warning',
        icon: 'Refresh',
        onClick: () => {
            console.log('清空')
        }
    },
    {
        label: '提交',
        type: 'submit',
        btnType: 'primary',
        icon: 'Plus',
        onClick: () => {
            console.log('提交')
        },
    }
]

let columns = ref([
    {
        prop: 'date',
        label: '序号',
        sortable: 'custom',
        width: '180'
    },
    {
        prop: 'xuhao',
        label: '运单编号',
    },
    {
        prop: 'mdd',
        label: '目的地',
    },
    {
        prop: 'sjy',
        label: '收件员',
    },
    {
        prop: 'ZL',
        label: '重量',
    },
    {
        prop: 'WPLX',
        label: '物品类型',
    },
    {
        prop: 'KJLX',
        label: '快件类型',
    },
    {
        prop: 'XYZ',
        label: '下一站',
    },
])

let tableData = ref([

])
</script>

<style scoped lang='scss'>
.receiving-scan {
    display: flex;
}

.scan-form {
    min-width: 285px;
}

.scan-list {
    flex: 1;
    margin-left: 15px;
}
</style>
